<template>
  <div id='ground' :style='size'>
    <chart ref='chart1' :options='options' :style='size' :auto-resize='true'></chart>
  </div>
</template>

<script>
  export default {
    name: 'pie',
    data () {
      return {
        options: {},
        size: {
          width: '100%',
          height: '100%'
        },
        unit: '',
        title: ''
      }
    },
    computed: {},
    mounted () {
      this.options = {
        title: {
          top: '0',
          left: 'center',
          text: '2018年昼夜各类功能区网格超标率',
          textStyle: {
            align: 'center',
            color: '#FFFFFF',
            fontSize: 15
          }
        },
        legend: {
          data: ['夜间', '昼间'],
          left: 'right',
          top: '10%',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          top: '23%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            axisLabel: {color: '#fff'},
            // axisLine: {
            //   lineStyle: {
            //     color: 'rgba(55,255,249,1)'
            //   }
            // },
            data: ['1类区', '2类区', '3类区', '4类区']
          }
        ],
        series: [

          {
            name: '夜间',
            type: 'bar',
            barWidth: '40%', // 柱子宽度
            barGap: '5%', // 柱子之间间距
            stack: '总量',
            color: '#005dff',
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return -params.value
                },
                position: 'left',
                color: '#fff'
              }
            },
            data: [-32.9, -10.9, 0, -7.3]
          },
          {
            name: '昼间',
            type: 'bar',
            stack: '总量',
            color: '#ffba00',
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return params.value
                },
                position: 'right',
                color: '#fff'
              }
            },
            data: [28, 10.9, 2.9, 0]
          }
        ]
      }
      window.addEventListener('resize', function () {
        this.$refs.chart1.resize()
      })
    }
  }
</script>
<style>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
